<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="info.type === '1' ? '新增考勤组' : '编辑考勤组'"
      :visible.sync="info.dialogVisible"
      width="30%"
      @close="close"
    >
      <el-form :model="queryParams" :rules="rules" ref="formRef">
        <div>
          <el-form-item label="考勤组名称:" label-width="150px" prop="name">
            <el-input
              v-model="queryParams.name"
              size="small"
              placeholder="请输入考勤组名称"
            />
          </el-form-item>
          <el-form-item label="考勤组负责人:" label-width="150px">
            {{ name }}
          </el-form-item>
          <el-form-item
            label="参与考勤人员:"
            label-width="150px"
            prop="teacherIds"
          >
            <el-select
              multiple
              v-model="queryParams.teacherIds"
              placeholder="请选择参与考勤人员"
              clearable
              @change="changeSelect"
            >
              <el-checkbox
                v-model="checked"
                @change="selectAll"
                style="margin: 10px; 10px 0px 0"
                >全选</el-checkbox
              >
              <el-option
                v-for="item in teacherInfo"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="上下班文案:"
            label-width="150px"
            prop="copywriting"
          >
            <el-input
              v-model="queryParams.copywriting"
              size="small"
              placeholder="请输入上下班文案"
              type="textarea"
            />
          </el-form-item>
          <el-form-item label="考勤组类型:" label-width="150px">
            <el-radio-group v-model="queryParams.attendance_type">
              <el-radio :label="queryParams.attendance_type"
                >固定班制（每天考勤一致）</el-radio
              >
              <!-- <el-radio :label="2">排班制（自定义设置考勤时间）</el-radio> -->
              <!-- <el-radio :label="3">自由工时（不设置班次、随时打卡）</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出勤日设置:" label-width="150px" prop="checked">
            <el-radio-group v-model="queryParams.checked">
              <el-radio :label="queryParams.checked"
                >班次一 固定工作制</el-radio
              ></el-radio-group
            >
          </el-form-item>
          <el-form-item style="margin-left: 45px;">
            <el-date-picker
            v-model="dateValue"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label-width="30px" prop="startTime">
              <el-time-select
                placeholder="起始时间"
                v-model="queryParams.startTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }"
              >
              </el-time-select>
            </el-form-item>
            <el-form-item label-width="0px" prop="endTime">
              <el-time-select
                placeholder="结束时间"
                v-model="queryParams.endTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                  minTime: startTime,
                }"
              >
              </el-time-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  addAttendanceList,
  viewAttendceInfo,
  updateAttendce,
} from "@/api/teach/attendanceSigngl";
import { selectTeacher } from "@/api/base/teacher";

export default {
  props: {
    info: {
      type: Object,
      default: false,
    },
  },
  data() {
    return {
      queryParams: {
        checked: true,
        attendance_type: 1,
      },
      dateValue: "",
      startTime: "08:30",
      endTime: "18:30",
      rules: {
        name: [
          { required: true, message: "考勤组名称不能为空", trigger: "blur" },
        ],
        principal: [
          { required: true, message: "考勤组负责人不能为空", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
        teacherIds: [
          { required: true, message: "参与考勤人员不能为空", trigger: "blur" },
        ],
        copywriting: [
          { required: true, message: "上下班文案不能为空", trigger: "blur" },
        ],
      },
      teacherInfo: [],
      checked: false,
    };
  },
  computed: {
    ...mapGetters(["name", "userId"]),
  },
  mounted() {
    selectTeacher().then((response) => {
      this.teacherInfo = response.rows;
    });
    if (this.info.type === "2") {
      this.viewAttendceInfo();
    }
  },
  methods: {
    //查看考勤组详情
    async viewAttendceInfo() {
      const { data, code, msg } = await viewAttendceInfo(this.info.id);
      if (code === 200) {
        this.queryParams.checked = true
        this.queryParams = data;
        const arr = [data.startDate,data.endDate]
        this.dateValue = arr
      }
    },
    selectAll() {
      this.queryParams.teacherIds = [];
      if (this.checked == true) {
        this.teacherInfo.forEach((item) => {
          this.queryParams.teacherIds.push(item.id);
        });
      } else {
        this.queryParams.teacherIds = [];
      }
    },
    changeSelect(val) {
      if (val.length === this.teacherInfo.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    close() {
      this.queryParams = {
        checked: true,
        radio: true,
      };
      this.$refs.formRef.resetFields();
      this.$emit("close");
    },
    add() {
      // console.log(this.dateValue,'-----dateValue');
      // return
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          if (!this.queryParams.startTime || !this.queryParams.endTime) {
            this.$message.error("出勤日不可为空");
            return;
          }
          const params = {
            ...this.queryParams,
            principal: this.name,
            startDate:this.dateValue[0],
            endDate:this.dateValue[1],
          };
          const { code, msg } =
            this.info.type === "1"
              ? await addAttendanceList(params)
              : await updateAttendce(params);
          if (code === 200) {
            this.$emit("close", "1");
            this.$message.success(msg);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form-item {
  margin: 15px;
}

.el-radio {
  // margin-bottom: 10px;
}

.el-button {
  padding: 10px 20px;
  margin-bottom: 5px;
}

.el-checkbox {
  margin-right: 5px;
}
</style>
